import { useState, useMemo } from "react";

const Chapter14 = (props) => {
    const { title } = props;
    const [num1, setNum1] = useState(0);
    const [num2, setNum2] = useState(100);
    const scale = () => {
        console.log("num2发生变化时也执行");
        return num1 * 100;
    };
    const sum = useMemo(() => {
        return num1 + num2;
    }, [num2]);
    return (
        <div className="wrapper wrapper4">
            <div className="page-header">
                <h3>{title}</h3>
            </div>
            <div className="page-content">
                <div className="alert alert-warning">
                    scale的值为：{scale()}&nbsp;&nbsp;sum的值为：{sum}
                </div>
                <hr />
                <div className="alert alert-info">num1的值为：{num1}</div>
                <button
                    className="btn btn-block btn-info"
                    onClick={() => setNum1(num1 + 3)}
                >
                    num1改变
                </button>
                <hr />
                <div className="alert alert-danger">num2的值为：{num2}</div>
                <button
                    className="btn btn-block btn-danger"
                    onClick={() => setNum2(num2 + 1)}
                >
                    num2改变
                </button>
            </div>
        </div>
    );
};

export default Chapter14;
